<!-- 搜索区域 -->
<div class="search-area">
  <div class="search-form">
    <div class="form-item">
      <span>仓库：</span>
      <input type="text" placeholder="请输入仓库名称/编号" [(ngModel)]="searchParams.warehouseCode">
    </div>
    <div class="form-item">
      <span>仓库状态：</span>
      <select [(ngModel)]="searchParams.warehouseStatus">
        <option value="">请选择</option>
        <option value="启用">启用</option>
        <option value="停用">停用</option>
        <option value="已锁定">已锁定</option>
      </select>
    </div>
    <div class="form-item">
      <span>库管部门：</span>
      <input type="text" placeholder="请输入" [(ngModel)]="searchParams.managementDept">
    </div>
    <div class="form-item">
      <span>仓库主管：</span>
      <input type="text" placeholder="请输入" [(ngModel)]="searchParams.warehouseManager">
    </div>
    <div class="form-buttons">
      <button class="btn-reset" (click)="reset()">重置</button>
      <button class="btn-search" (click)="search()">查询</button>
      <button class="btn-advanced">高级搜索</button>
    </div>
  </div>
</div>

<!-- 操作按钮区域 -->
<div class="operation-area">
  <button class="btn-add" (click)="addWarehouse()">新增</button>
  <button class="btn-delete">删除</button>
  <button class="btn-enable">启用</button>
  <button class="btn-disable">停用</button>
  <button class="btn-lock">锁定</button>
</div>

<!-- 表格区域 -->
<div class="table-container">
  <table>
    <thead>
      <tr>
        <th><input type="checkbox"></th>
        <th>序号</th>
        <th>仓库编号</th>
        <th>仓库名称</th>
        <th>仓库容量/m³</th>
        <th>仓库地址</th>
        <th>库管部门</th>
        <th>仓库主管</th>
        <th>库位数量</th>
        <th>仓库状态</th>
        <th>操作人</th>
        <th>操作时间</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of warehouseList">
        <td><input type="checkbox"></td>
        <td>{{item.序号}}</td>
        <td>{{item.仓库编号}}</td>
        <td>{{item.仓库名称}}</td>
        <td>{{item.仓库容量}}</td>
        <td>{{item.仓库地址}}</td>
        <td>{{item.库管部门}}</td>
        <td>{{item.仓库主管}}</td>
        <td>{{item.库位数量}}</td>
        <td>{{item.仓库状态}}</td>
        <td>{{item.操作人}}</td>
        <td>{{item.操作时间}}</td>
        <td>
          <a class="btn-edit">编辑</a>
          <a class="btn-delete">删除</a>
          <a class="btn-view" (click)="viewWarehouseDetails(item)">详情</a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<!-- 分页区域 -->
<div class="pagination">
  <span>总 100 条</span>
  <div class="page-numbers">
    <a>1</a>
    <a>2</a>
    <a>3</a>
    <a>4</a>
    <a>5</a>
    <span>...</span>
    <a>10</a>
  </div>
  <div class="page-size">
    <select>
      <option>10条/页</option>
      <option>20条/页</option>
      <option>50条/页</option>
    </select>
  </div>
</div> 